<template>
  <div class="container">
    <div class="mainbox content">
      <ul class="clearfix nav1">
        <li style="width: 66%;">
          <div style="display: flex; justify-content: space-between;">
            <div style="display: flex; flex-direction: column; width: 48%;" class="box">
              <div class="box">
                <div class="topimg">
                  最新识别
                </div>
                <jieguolunbao/>
              </div>
              <div class="box number-box" style="margin-top: 10px;">
                <div class="topimg">
                  统计数量
                </div>
                <renshutiaoxingtu/>
              </div>
            </div>

            <!-- 右边：搜索栏 + 地图 -->
            <div style="display: flex; flex-direction: column; width: 48%;" class="middle">
              <div class="fishso-box" style="margin-bottom: 10px;">
                <fishso/>
              </div>
              <div class="box map-box" style="height: 700px;">
                <ZhanjiangMap/>
              </div>
            </div>
          </div>

        </li>

        <li style="width: 32%">
          <div class="box">
                <div class="topimg">
                  最热搜索
                </div>
            <fishpaixun/>
          </div>
          <div class="box fishimg-box">
              <div class="topimg">
                识别结果
              </div>
              <div class="imgarea">
                <img :src="imgUrl" alt="鱼图" class="fish-image">
                <div class="info">
                  <div class="namearea">
                    <div class="chinesename">中文名：{{ ChineseName || '' }}</div>
                    <div class="englishname">拉丁名：{{ EnglishName || '' }}</div>
                  </div>
                  <div class="confidence">
                    置信度：{{ Confidence || '' }}
                  </div>
                </div>
              </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {emitter} from '@/utils/emitter';
import fishpaixun from '@/components/shiyu/fishpaixun.vue';
import fishso from '@/components/shiyu/fishso.vue';
import jieguolunbao from '@/components/shiyu/jieguolunbao.vue';
import renshutiaoxingtu from '@/components/shiyu/renshutiaoxingtu.vue';
import ZhanjiangMap from '@/components/map.vue';
import {ref} from 'vue'
import defaultImg from '@/assets/yutu/vfu.png'

const imgUrl = ref(defaultImg)
const ChineseName = ref('')
const EnglishName = ref('')
const Confidence = ref('')

// 监听update-fish-image事件
emitter.on('update-fish-image',(value)=>{
  console.log('update-fish-image事件被触发',value)
  imgUrl.value = value
})

// 监听update-fish-name事件
emitter.on('update-fish-name', (value) => {
  console.log('update-fish-name事件被触发', value)
  fishName.value = value
})

// 监听update-fish-chinese-name事件
emitter.on('update-fish-chinese-name', (value) => {
  console.log('update-fish-chinese-name事件被触发', value)
  ChineseName.value = value
})

// 监听update-fish-english-name事件
emitter.on('update-fish-english-name', (value) => {
  console.log('update-fish-english-name事件被触发', value)
  EnglishName.value = value
})

// 监听update-fish-confidence事件
emitter.on('update-fish-confidence', (value) => {
  console.log('update-fish-confidence事件被触发', value)
  Confidence.value = value
})
</script>

<style scoped>

.container {
  width: 1950px;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%);
}

.fishso-box{
  position: relative;
  right: 10px;
  width: auto;
}

.fishimg-box{
  position: relative;
  bottom: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1); 
  border-radius: 12px; /* 添加圆角 */
  overflow: hidden;
  /* background-color: skyblue; */
}

.box {
  text-align: center;
}

.map-box{
  position: relative;
  right: 15px;
  bottom: 45px;
}

.title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.middle{
  position: relative;
  bottom: 20px;
}

#morenimg{
  width: auto;
  height: 355px;
  display: block;
  margin: 0 auto;
}
.number-box{
  position: relative;
  top: 40px;
}
.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(../assets/top.png);
  background-size: cover;
}
.info{
  /* display: flex; */
  /* background-color: rgba(255,255,255,0.05); */
}
.fish-image {
  width: auto;
  height: 280px;
  display: block;
  margin: 0 auto;
}
.imgarea{
  position: relative;
  /* background-color: skyblue; */
  height: 355px;
}
.namearea{
  /* background-color: red; */
  height: 40px;
  width: 100%;
  font-size: 21px;
  display: flex;
}
.chinesename{
  text-align: center;
  /* background-color: gray; */
  width: 50%;
  line-height: 40px;
}
.englishname{
  text-align: center;
  /* background-color: yellow; */
  width: 50%;
  line-height: 40px;
}
.confidence{
  height: 35px;
  width: 100%;
  font-size: 21px;
  /* background-color: green; */
  line-height: 35px;
}
</style>
